<template>
  <a-drawer
    title="角色菜单权限配置"
    :width="380"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    :closable="false"
    @close="onClose"
  >
    <a-form :form="form" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item style="display:none">
            <a-input v-decorator="['id']"/>
          </a-form-item>
          <a-form-item label="拥有的权限:">
            <a-tree
              v-model="checkedKeys"
              checkable
              :defaultExpandAll="true"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              :replaceFields="replaceFields"
              @select="onSelect"
              @check="onCheck"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-popconfirm title="真的放弃编辑吗?" @confirm="onClose">
        <a-button :style="{ marginRight: '8px' }">
          取消
        </a-button>
      </a-popconfirm>
      <a-button type="primary" @click="permissionSubmit">
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
  import { findAllMenuTree, findMenuByRoleId, permissionSetting } from '@/api/system'
  import pick from 'lodash.pick'
  import { getParentId } from '@/utils/util'
export default {
  name: 'PermissionModal',
  data () {
    return {
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'id'
      },
      visible: false,
      form: this.$form.createForm(this),
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      halfCheckedKeys: [],
      treeCheck: false,
      mdl: {}
    }
  },
  created () {
    this.loadAllMenu()
  },
  watch: {
  },
  methods: {
    loadAllMenu () {
      return new Promise(resolve => {
        findAllMenuTree().then(res => {
          this.treeData = res.data
          resolve(res.data)
        })
      })
    },
    onCheck (checkedKeys, info) {
      if (!this.treeCheck) this.treeCheck = true
      this.checkedKeys = checkedKeys
      this.halfCheckedKeys = info.halfCheckedKeys
    },
    onSelect (selectedKeys, info) {
      this.selectedKeys = selectedKeys
    },
    onClose () {
      this.visible = false
      this.checkedKeys = []
    },
    setting (record) {
      this.visible = true
      // 获取已拥有菜单
      findMenuByRoleId({ id: record.id }).then(res => {
        const arr = []
        const pids = getParentId(this.treeData, arr)
        const pidSet = new Set(pids.map(m => m + ''))
        const checkedLists = Array.from(pidSet)
        this.checkedKeys = res.data.filter(function (val) { return checkedLists.indexOf(val) === -1 })
        this.mdl = Object.assign({}, record)
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.mdl, 'id'))
        })
      }).catch(res => {
        this.$message.error(((res.response || {}).data || {}).message || res.message)
        this.visible = false
      })
    },
    permissionSubmit (e) {
      e.preventDefault()
      const checkedAll = this.treeCheck ? this.checkedKeys.concat(this.halfCheckedKeys) : this.checkedKeys.concat(Array.from(this.pidSet))
      this.form.validateFields((err, values) => {
        if (!err) {
          values.menuIds = checkedAll
          permissionSetting(values).then(res => {
            if (res.code === 200) {
              this.$message.success('权限配置成功')
              this.$emit('ok')
              this.visible = false
            }
          }).catch(res => {
            this.$message.error(((res.response || {}).data || {}).message || res.message)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
